<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>

  <style>
    * {
      list-style: none;
    }

    .default:hover {
      cursor: default;
      /* 默认光标（通常是一个箭头) */
    }

    #auto:hover {
      cursor: auto;
      /*默认。浏览器设置的光标*/
    }

    .crosshair:hover {
      cursor: crosshair;
      /*光标成十字线*/
    }

    .pointer:hover {
      cursor: pointer;
      /*光标呈现为指示链接的指针（一只手）*/
    }

    .move:hover {
      cursor: move;
      /*此光标指示某对象可被移动。*/
    }

    .e-resize:hover {
      cursor: e-resize;
      /*此光标指示矩形框的边缘可被向右（东）移动。*/
    }

    .ne-resize:hover {
      cursor: ne-resize;
      /*此光标指示矩形框的边缘可被向上及右移动（北/东）。*/
    }

    .nw-resize:hover {
      cursor: nw-resize;
      /*此光标显示矩形的边缘可被向上及向左移动（北/西）。*/
    }

    .n-resize:hover {
      cursor: n-resize;
      /*此光标显示矩形的边缘可被向上及向上（北）移动。*/
    }

    .se-resize:hover {
      cursor: se-resize;
      /*此光标显示矩形的边缘可被向上及向下向右移动（南/东）。*/
    }

    .sw-resize:hover {
      cursor: sw-resize;
      /*此光标显示矩形的边缘可被向上及向下及向左移动（南/西）。*/
    }

    .s-resize:hover {
      cursor: s-resize;
      /*此光标显示矩形的边缘可被向下移动（北/西）。*/
    }

    .w-resize:hover {
      cursor: w-resize;
      /*此光标显示矩形的边缘可被向左移动（西）。*/
    }

    .text:hover {
      cursor: text;
      /* 此光标指文本 */
    }

    .wait:hover {
      cursor: wait;
      /*此光标指示程序正忙（通常是一只表或沙漏）*/
    }

    .help:hover {
      cursor: help;
      /*此光标指示可用的帮助(通常是一个问号或一个气球)。*/
    }
  </style>
</head>
<body>


<ul>
  <li class="default">default</li>
  <li id="auto">auto</li>
  <li class="crosshair">crosshair</li>
  <li class="pointer">pointer</li>
  <li class="move">move</li>
  <li class="e-resize">e-resize</li>
  <li class="ne-resize">ne-resize</li>
  <li class="nw-resize">nw-resize</li>
  <li class="n-resize">n-resize</li>
  <li class="se-resize">se-resize</li>
  <li class="sw-resize">sw-resize</li>
  <li class="s-resize">s-resize</li>
  <li class="w-resize">w-resize</li>
  <li class="text">text</li>
  <li class="wait">wait</li>
  <li class="help">help</li>
</ul>
</body>
</html>
